<template>
	<view class="columnbox wdh-100 content" v-if="userInfo!=''">
		<view class="rowbox wdh-100 spb one-info">
			<view class="info-title">头像</view>
			<view class="rowbox" @click="chooseImg">
				<image mode="aspectFill" class="user-img" :src="userInfo.user.avatar">
				</image>
				<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="rowbox wdh-100 spb one-info">
			<view class="info-title">昵称</view>
			<view class="rowbox" @click="changeName">
				<view class="info-detail">{{userInfo.user.nickName}}</view>
				<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="rowbox wdh-100 spb one-info" @click="phone(userInfo.user.phonenumber)">
			<view class="info-title">手机号</view>
			<view class="rowbox">
				<view class="info-detail">{{userInfo.user.phonenumber}}</view>
				<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="rowbox wdh-100 spb one-info" @click="tomycodes">
			<view class="info-title">二维码</view>
			<view class="rowbox">
				<image class="user-ewm" src="/static/img/user-ewm.png" mode="widthFix"></image>
				<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<view class="rowbox wdh-100 spb one-info def-info">
			<view class="info-title">ID</view>
			<view class="rowbox">
				<view class="info-detail">{{userInfo.user.uuid}}</view>
			</view>
		</view>
		<picker mode="date" class="wdh-100" @change="chooseBirthday" :end="curdate">
			<view class="rowbox wdh-100 spb one-info" style="margin-top: 20rpx;">
				<view class="info-title">生日</view>
				<view class="rowbox">
					<view class="info-detail">{{userInfo.user.birthday||'请选择'}}</view>
					<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
				</view>
			</view>
		</picker>
		<view class="rowbox wdh-100 spb one-info" style="margin-top: 20rpx;">
			<view class="info-title">性别</view>
			<view class="rowbox" @click="sexflag=true">
				<view class="info-detail">{{userInfo.user.sex==1?'女':'男'}}</view>
				<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<view v-if="userInfo.user.verified==3" class="rowbox wdh-100 spb one-info def-info" style="margin-top: 20rpx;">
			<view class="info-title">实名认证</view>
			<view class="rowbox">
				<view class="info-detail">已实名</view>
			</view>
		</view>
		<view v-else-if="userInfo.user.verified==1" class="rowbox wdh-100 spb one-info def-info"
			style="margin-top: 20rpx;">
			<view class="info-title">实名认证</view>
			<view class="rowbox">
				<view class="info-detail">实名审核中</view>
			</view>
		</view>
		<view v-else @click="toIden" class="rowbox wdh-100 spb one-info" style="margin-top: 20rpx;">
			<view class="info-title">实名认证</view>
			<view class="rowbox">
				<view class="info-detail" v-if="userInfo.user.verified==0">未实名</view>
				<view class="info-detail" v-else-if="userInfo.user.verified==2">实名审核失败</view>
				<u-icon color="#979797" name="arrow-right" size="28rpx"></u-icon>
			</view>
		</view>
		<!-- 昵称 -->
		<u-popup :show='nickflag' mode='center' round="20rpx">
			<view class="columnbox">
				<view class="popup-title">修改昵称</view>
				<input v-model="name" class="popup-input" placeholder="请输入" />
				<view class="wdh-100 rowbox">
					<view class="rowbox popup-qx" @click="nickflag=false">取消</view>
					<view class="rowbox def-bgcol popup-qd" @click="updateName">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 手机号 -->
		<u-popup :show='phoneflag' mode='center' round="20rpx">
			<view class="columnbox">
				<view class="popup-title">输入手机号</view>
				<input v-model="phoneNumber" class="popup-input" placeholder="请输入手机号" />
				<view class="wdh-100 rowbox">
					<view class="rowbox popup-qx" @click="phone=false">取消</view>
					<view class="rowbox def-bgcol popup-qd" @click="updateName1">确定</view>
				</view>
			</view>
		</u-popup>
		<!-- 性别 -->
		<u-popup :show='sexflag' mode='bottom' round="20rpx">
			<view class="columnbox">
				<view class="popup-title">修改性别</view>
				<view class="columnbox wdh-100 sex-box">
					<view @click="setSex(1)">男</view>
					<view @click="setSex(2)">女</view>
					<view @click="sexflag=false">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: '',
				nickflag: false,
				name: '',
				sexflag: false,
				refreshflag: false,
				curdate: '',
				phoneNumber:'',
				phoneflag:false
			};
		},
		onLoad() {
			let date = new Date()
			let curdate = date.getFullYear() + '-' + (date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : (date
				.getMonth() + 1)) + '-' + (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
			this.$nextTick(() => {
				this.userInfo = this.user
			})
		},
		onShow() {
			if (this.refreshflag) {
				this.refreshflag = false
				this.getUserInfo()
			}
		},
		computed: {
			// 通过计算属性将 state 中的 count 映射到组件
			isLogin() {
				return this.$store.state.isLogin;
			},
			user() {
				return this.$store.state.user;
			},
		},
		methods: {
			// 跳转我的二维码
			tomycodes(){
				this.$tab.navigateTo('/packageA/myCode/myCode');
			},
			//  跳转手机页面
			phone(phoneNumber){
				if(uni.$u.test.isEmpty(this.userInfo.user.phonenumber)){
					this.phoneflag = true
				}
				// else{
				// 	this.$tab.navigateTo('/packageA/phone/phone?phone='+phoneNumber)
				// }
				
			},
			chooseBirthday(e) {
				this.userInfo.user.birthday = e.detail.value
				this.$req.put('/xcx/user', {
					id: this.userInfo.user.userId,
					openid: this.userInfo.user.openid,
					birthday: this.userInfo.user.birthday + '',
				}).then(response => {
					uni.hideLoading()
					this.getUserInfo()
				})
			},
			// 修改性别
			setSex(v) {
				this.sexflag = false
				this.$req.put('/xcx/user', {
					id: this.userInfo.user.userId,
					openid: this.userInfo.user.openid,
					remark: this.userInfo.user.remark,
					birthday: this.userInfo.user.birthday,
					sex: v - 1 + ''
				}).then(response => {
					uni.hideLoading()
					this.getUserInfo()
				})
			},
			//修改昵称
			changeName() {
				this.nickflag = true
				this.name = this.userInfo.user.nickName
			},
			// 修改手机号
			updateName1(){
				this.phoneflag = false;
				this.$req.put('/xcx/user', {
					id: this.userInfo.user.userId,
					openid: this.userInfo.user.openid,
					remark: this.userInfo.user.remark,
					birthday: this.userInfo.user.birthday,
					// nickName: this.name
					phonenumber:this.phoneNumber
				}).then(response => {
					uni.hideLoading()
					this.getUserInfo()
				})
			},
			updateName() {
				this.nickflag = false
				uni.showLoading({
					title: '正在保存'
				})
				this.$req.put('/xcx/user', {
					id: this.userInfo.user.userId,
					openid: this.userInfo.user.openid,
					remark: this.userInfo.user.remark,
					birthday: this.userInfo.user.birthday,
					nickName: this.name
				}).then(response => {
					uni.hideLoading()
					this.getUserInfo()
				})
			},
			//修改头像
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						uni.showLoading({
							title: '正在保存'
						})
						console.log(res.tempFilePaths[0])
						this.$req.uploadImg(res.tempFilePaths[0]).then(resp => {
							console.log('==', resp.data)
							this.$req.put('/xcx/user', {
								id: this.userInfo.user.userId,
								openid: this.userInfo.user.openid,
								remark: this.userInfo.user.remark,
								birthday: this.userInfo.user.birthday,
								avatar: resp.data.ossId
							}).then(response => {
								console.log(response)
								uni.hideLoading()
								this.getUserInfo()
							})
						})
					}
				})
			},
			toIden() {
				uni.navigateTo({
					url: '/pages/user/iden'
				})
			},
			getUserInfo() {
				uni.showLoading({
					title: '加载中'
				})
				this.$req.get('/xcx/user/getInfo').then(res => {
					
					console.log(res)
					uni.hideLoading()
					if (res.data.data) {
						uni.setStorageSync('userInfo', res.data.data)
						this.$store.dispatch('actionsHandleUserInfoChange', res
							.data.data);
						this.userInfo = res.data.data
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #f7f8fa;
		min-height: 100vh;
		justify-content: flex-start;
		font-family: PingFang SC;
		width: 100%;
		overflow: hidden;
	}

	.one-info {
		background: #fff;
		padding: 32rpx 20rpx;
		border-bottom: #f7f0fa solid 1px;
	}

	.info-title {
		font-size: 28rpx;
	}

	.user-img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100rpx;
		margin-right: 20rpx;
	}

	.info-detail {
		font-size: 28rpx;
		color: #979797;
		margin-right: 20rpx;
	}

	.user-ewm {
		margin-right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	.def-info {
		background: #efefef;
	}

	.popup-title {
		font-size: 32rpx;
		width: 600rpx;
		text-align: center;
		padding: 32rpx 0;
	}

	.popup-input {
		width: 500rpx;
		border: #f7f9fa solid 1px;
		height: 70rpx;
		border-radius: 10rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.popup-qx,
	.popup-qd {
		font-size: 28rpx;
		margin: 40rpx 50rpx;
		border: #efefef solid 1px;
		width: 170rpx;
		height: 70rpx;
		border-radius: 20rpx;
	}

	.popup-qd {
		color: #fff;
	}

	.sex-box {
		view {
			padding: 40rpx 0;
			font-size: 28rpx;
			border-bottom: #efefef solid 1px;
			width: 100%;
			text-align: center
		}
	}
</style>